import { useMemo, useState } from "react";
import { observer } from "mobx-react-lite";
import { View } from "@tarojs/components";
import { Tabbar } from "@nutui/nutui-react-taro";
import TabbarIconComp from "@/components/TabbarIcon";
import LandlordHomeComp from "./landlord/home";
import LandlordUserComp from "./landlord/user";
import TenantHomeComp from "./tenant/home";
import TenantUserComp from "./tenant/user";
import TenantMarketComp from "./tenant/market";
import ChatSession from "./chatSession";
import authenticateStore from "@/stores/AuthStore";
import AuthConstant from "@/constant/AuthConstant";
import useLease from "@/hooks/useLease";
import useReport from "@/hooks/useReport";
import useChat from "@/hooks/useChat";
import "./index.less";

interface ITabbar {
  text: string;
  icon: JSX.Element;
  iconSelected: JSX.Element;
  comp: JSX.Element;
  notice: number;
}

function TabbarComp() {
  const { leasePendingNoticeNum } = useLease();
  const { landlordReportPendingNoticeNum } = useReport();
  const { chatMessageUnreadNum } = useChat();
  const landlordList: ITabbar[] = [
    {
      text: "首页",
      icon: <TabbarIconComp src="home-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="home-icon.png" />,
      comp: <LandlordHomeComp />,
      notice: 0,
    },
    {
      text: "消息",
      icon: <TabbarIconComp src="chat-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="chat-icon.png" />,
      comp: <ChatSession />,
      notice: chatMessageUnreadNum,
    },
    {
      text: "我的",
      icon: <TabbarIconComp src="user-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="user-icon.png" />,
      comp: <LandlordUserComp />,
      notice: leasePendingNoticeNum + landlordReportPendingNoticeNum,
    },
  ];

  const tenantList: ITabbar[] = [
    {
      text: "首页",
      icon: <TabbarIconComp src="home-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="home-icon.png" />,
      comp: <TenantHomeComp />,
      notice: 0,
    },
    {
      text: "看市场",
      icon: <TabbarIconComp src="market-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="market-icon.png" />,
      comp: <TenantMarketComp />,
      notice: 0,
    },
    {
      text: "消息",
      icon: <TabbarIconComp src="chat-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="chat-icon.png" />,
      comp: <ChatSession />,
      notice: chatMessageUnreadNum,
    },
    {
      text: "我的",
      icon: <TabbarIconComp src="user-icon-unselect.png" />,
      iconSelected: <TabbarIconComp src="user-icon.png" />,
      comp: <TenantUserComp />,
      notice: 0,
    },
  ];

  /**
   * 获取身份
   */
  const getIdentity = () => {
    if (authenticateStore.identity === AuthConstant.TENANT) {
      // 租客
      return tenantList;
    } else if (authenticateStore.identity === AuthConstant.LANDLORD) {
      // 房东
      return landlordList;
    }
  };

  let tabbarList = useMemo(() => {
    return getIdentity();
  }, [
    leasePendingNoticeNum,
    landlordReportPendingNoticeNum,
    chatMessageUnreadNum,
  ]);

  const [activeIdx, setActiveIdx] = useState(0);

  const handleSwitch = (idx: number) => {
    setActiveIdx(idx);
  };

  return (
    <View className="light">
      {tabbarList?.map((item, idx) => {
        return (
          <View style={{ display: idx === activeIdx ? "block" : "none" }}>
            {item.comp}
          </View>
        );
      })}
      <Tabbar fixed onSwitch={handleSwitch} defaultValue={activeIdx}>
        {tabbarList?.map((item, idx) => {
          return (
            <Tabbar.Item
              key={idx}
              title={item.text}
              icon={idx === activeIdx ? item.iconSelected : item.icon}
              value={item.notice ? item.notice : undefined}
            />
          );
        })}
      </Tabbar>
    </View>
  );
}

export default observer(TabbarComp);
